<div class="wrapper">
    <div class="abs-center mt-lg width-lg">
          <div class="text-center text-lg mt-percent p-md">鲁泰电器监控系统</div>
        <nz-card [nzNoHovering]="true" [nzBordered]="false" class="ant-card__primary ant-card__title-img">

            <ng-template #title>
                <div class="text-center"><img src="./assets/img/logo.svg" style="height:20px;"></div>
            </ng-template>
            <ng-template #body>
                <form nz-form [formGroup]="valForm" (ngSubmit)="submit()" role="form">
                    <div nz-form-item>
                        <div nz-form-control [nzValidateStatus]="valForm.controls.email">
                            <nz-input formControlName="username" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
                                <ng-template #suffix>
                                    <i class="anticon anticon-user"></i>
                                </ng-template>
                            </nz-input>
                            <div nz-form-explain
                                 *ngIf="valForm.controls.username.dirty&&valForm.controls.username.hasError('required')">
                                用户名必填
                            </div>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-control [nzValidateStatus]="valForm.controls.password">
                            <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'"
                                      [nzSize]="'large'">
                                <ng-template #suffix>
                                    <i class="anticon anticon-lock"></i>
                                </ng-template>
                            </nz-input>
                            <div nz-form-explain
                                 *ngIf="valForm.controls.password.dirty&&valForm.controls.password.hasError('required')">
                                密码必填
                            </div>
                        </div>
                    </div>
                    <!--   <div nz-form-item nz-row>
                           <div nz-form-label nz-col [nzSpan]="12">
                               <nz-input [nzSize]="'large'" [nzPlaceHolder]="'验证码'"></nz-input>
                           </div>
                           <div nz-form-control nz-col [nzSpan]="12">
                               <img  (click)="change()" src="">
                           </div>
                       </div>-->
                    <div nz-form-item nz-row>
                        <div nz-col [nzSpan]="24">
                            <button nz-button [disabled]="!valForm.valid" [nzType]="'primary'" [nzSize]="'large'"
                                    class="ant-btn__block">
                                <span>登录</span>
                            </button>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
        <div class="text-center text-sm">
            &copy; {{ settings.app.year }} - {{ settings.app.name }}
            <br> {{ settings.app.description }}
        </div>
    </div>
</div>
